<template>
  <div class="bg-white">
    <mu-toast v-if="toast" message="保存成功" @close="hideToast"/>
   
      <mu-list style="margin-top: 3rem;">
        <mu-sub-header >当前课堂 </mu-sub-header>
        <mu-divider />
        
        <section style="margin-left: 4rem;">
          <mu-select-field v-model="DJJ" :multiple="false" label="请选择节次">
          <mu-menu-item :value="item" :title="item" v-if="isIndex(index,item)"  v-for="(item,index) in choice_index" ></mu-menu-item>
        </mu-select-field>
        </section>
         <section style="">
        	 <mu-auto-complete style="margin-left: 4rem;" filter="noFilter" label="选择或输入课程" openOnFocus  labelFloat :dataSource="courseList" :maxHeight="200"  @change="handlechange" v-model="courseName"  />
         </section>
        <section>
        	 <mu-auto-complete style="margin-left: 4rem;" filter="noFilter" label="选择或输入教师" labelFloat  :value="courTeaName" v-model="courTeaName" />
        </section>
        <section>
        	 <mu-auto-complete style="margin-left: 4rem;" filter="noFilter" label="请输入上课地点" labelFloat :value="classPosition"   />
        </section>
        
      </mu-list>
      <mu-list>
      <!--<mu-sub-header >课堂日志 </mu-sub-header>-->
      <section class="diary-title">
    		<span class="diary-title-left">课堂日志</span>
    		<span class="diary_state" :class="FnDiaSta()">{{subState}}</span>
      </section>
      
      <!--<mu-divider />
        <mu-list-item disableRipple>
        <mu-icon  value="alarm"  color="blue"/>
        <mu-time-picker v-model="DDSJ" :disabled="disable" helpText="到达时间" hintText="到达时间" format="24hr" />
        <br/>
        <mu-icon value="alarm"  color="blue"/>
        <mu-time-picker v-model="LKSJ" :disabled="disable" helpText="离开时间" hintText="离开时间" format="24hr" />
      </mu-list-item>
      <mu-divider />
      <mu-list-item disableRipple :title="'讲授时长:'+JSSJ+'分钟'">
       <mu-icon slot="left" value="alarm"  color="blue"/>
      </mu-list-item>
      <div class="mu-list-item-zzg">
        <mu-slider :disabled="disable" v-model="JSSJ" :step="1" :max="SKSC" class="demo-slider"/>
      </div>
      <mu-divider />-->
      
      <mu-list-item title="" >
      	<mu-icon slot="left" value="alarm"  color="blue"/>
      	<span  style="font-size: 1rem;">到达时间:{{DDSJ}}</span>
      	 <yd-datetime type="time" v-model="DDSJ">
         </yd-datetime>
        <mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
      </mu-list-item> 
      
      <mu-list-item title="" >
      	<mu-icon slot="left" value="alarm"  color="blue"/>
      	<span  style="font-size: 1rem;">离开时间:{{LKSJ}}</span>
      	 <yd-datetime type="time" v-model="LKSJ">
         </yd-datetime>
        <mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
      </mu-list-item> 
      
      <mu-list-item title="" @click="openTimePop()">
         <mu-icon slot="left" value="alarm"  color="blue"/>
         <span style="font-size: 1rem;">讲授时长:{{address[0]}}</span>
         <mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
      </mu-list-item> 
      
      <!--<section>{{address[0]}}</section>-->
      
  		<mu-popup position="bottom" popupClass="demo-popup-bottom" :open="bottomPopup" @close="closeTimePop(beforeVal)">
    		<mu-content-block>
	        <div class="demo-picker-container" >
	        	<section class="slider-time" >
	        		<a @click="closeTimePop(beforeVal)">取消</a>
	        		<a style="color: #2397f2" @click="closeTimeSure()">确定</a>
	        	</section>
					  <mu-picker :slots="addressSlots" :visible-item-count="7" @change="addressChange" :values="address"/>
					</div>
				</mu-content-block>
			</mu-popup>
      
      
      
      
      <mu-list-item @click="handleToggle('SFTG')" title="正常出勤">
        <mu-switch v-model="SFTG" :disabled="disable" slot="right"/>
        <mu-icon slot="left" value="alarm_on"  color="green500"/>
      </mu-list-item>
      <mu-divider />
      <mu-list-item @click="handleToggle('ZYBZ')" title="布置作业">
        <mu-icon slot="left" value="note_add"  color="green500"/>
        <mu-switch v-model="ZYBZ" :disabled="disable" slot="right"/>
      </mu-list-item>
      <mu-divider />
      <mu-list-item @click="handleToggle('SFKQ')" title="已考勤" >
        <mu-icon slot="left" value="assignment_turned_in"  color="green500"/>
        <mu-switch v-model="SFKQ" :disabled="disable" slot="right"/>
      </mu-list-item>
      
       <mu-list-item @click="openEdit" title="授课内容">
        <mu-icon slot="left" value="turned_in"  color="blue"/>
        <mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
       </mu-list-item>
	      <section style="margin-bottom: 3rem;">
	      	<p style="width: 90%;margin:0 5%;padding: 0.5rem;font-size: 0.8rem;">
	      		{{showContent}}
	      	</p>
	      </section>
      
        <mu-dialog :open="isEditTeach" title="编辑授课内容" @close="close">
		    	<section style="position: relative; height: 8.4rem;background-color: #fff;">
						<textarea class="remove-texStyle" placeholder="请输入授课内容(不少于10个字)" v-model="EditContent"></textarea>
						<aside class="Edit-count" >
							<span>{{EditContent.length}}</span>
							<span style="color: #b7b7b7;">/300</span>
						</aside>
					</section>
			    <mu-flat-button slot="actions" @click="closeEdit('cancel')" primary label="取消"/>
			    <mu-flat-button slot="actions" primary @click="closeEdit('sure')" label="确定"/>
		  	</mu-dialog>
      
    </mu-list>
    <mu-bottom-nav @change="handleChange" class="bottom-btnbar">
      <mu-bottom-nav-item value="save" title="提交" icon="save"/>
      
      <mu-dialog :open="popCorrect" :title="popCorrectTitle" @close="close">
		    <mu-flat-button slot="actions" primary @click="close('correct')" label="确定"/>
		  </mu-dialog>
      <mu-dialog :open="popCommissary" :title="popTitleInfo" @close="close">
		    <mu-flat-button slot="actions" @click="close('cancel')" primary label="取消"/>
		    <mu-flat-button slot="actions" primary @click="close('sure')" label="确定"/>
		  </mu-dialog>
      
      
    </mu-bottom-nav>
  </div>
</template>
<script>
import ClassInfo from '@/components/class_info'
export default {
  data () {
    return {
      SFTG:true, //是否脱岗
      DDSJ:'', //到达时间
      LKSJ:'', //离开时间
      JSSJ:0, //讲授时间
      ZYBZ:true, //作业布置
      SFKQ:true,  //是否考勤
      SJSKDD:'',
      SJXKKH:'',
      SJSKJS:'',
      SJKCMC:'',
      SJKCDM:'',
      SJSKJSZGH:'',
      saveType:'',
      disable:false,
      noClass:true,
      toast:false,
      maxHeight:200,
      SKSC:0,
      kcIndex: 0,
      jsxm: '',
      jszgh: '',
      kcmc: '',
      list: [],
      jsList: [],
      DJJ:'',
      SFTG: true,
      ZYBZ: true,
      SFKQ: true,
      weeks:['日','一','二','三','四','五','六'],
      focusData: [],
      jiaoshiliebiao: [],
      popTitleInfo:'',
      isSubmitThis:false,
      popCommissary:false,
      choice_index:{
      	1:'1-2',
      	3:'3-4',
      	5:'5-6',
      	7:'7-8',
      	9:'9-10',
      	11:'11-12'
      },
      courseList:[],
      courseData:{},
      classroomPosition:[],
      teacherName:[],
      getIndex:0,
      courseName:'',
      courTeaName:'',
      classPosition:'',
      publicInfo:{
	    	academic:'',
	    	semester:'',
	    	teachWeek:''
		  },
		  currentTime:'',
		  currentmonth:'',
		  currentFullDate:'',
		  timeOption:{},
		  addClassId:{},
		  arrTime:0,
		  leaTime:0,
		  popCorrect:false,
		  popCorrectTitle:'',
		  year:'',
		  month:'',
		  currDate:'',
		  getCoursId:'',
		  addressSlots: [
        {
          width: '100%',
          textAlign: 'center',
//        values: Object.keys(address),
					values:[]
        }
      ],
      address:[],
      beforeVal:[],
      bottomPopup: false,
      showContent:'',
      EditContent:'',
      isEditTeach:false,
      diaryState:0,
		  subState:'',
		  isEditSec:true,
    }
  },
  watch: {
    kcIndex (newVal, oldVal) {
      this.jsxm = this.list[newVal].JSXM
      this.jszgh = this.list[newVal].JSZGH
      this.kcmc = this.list[newVal].KCMC 
      this.getkcjs()
    },
//  changeIndex(newVal, oldVal){
//  	this.Tname=this.list[newVal].JSXM
//  },
    jsxm (newVal, oldVal){
      this.SJSKJS = newVal
    },
    kcmc (newVal,oldVal){
      this.SJKCMC = newVal
    },
    DDSJ(newVal,oldVal){
    	this.arrTime=parseInt(newVal.replace(':',''))
    },
    LKSJ(newVal,oldVal){
    	this.leaTime=parseInt(newVal.replace(':',''))
    },
    DJJ(newVal,oldVal){
    	this.getCourTimeInfo(newVal)
//  	this.getIsCoursId(newVal)
    },
  },
  mounted(){
  	this.variousTime()
  	this.getPublicInfo()
  	
    this.loadCoureInfo()
//  this.getThisDate()
    
  },
  computed:{
	},
  methods: {
  	FnDiaSta(){
  		if(this.diaryState==0){
  			 this.subState='未提交'
  			 return 'diary_unsubmit' 
  		}else if(this.diaryState==1){
  			 this.subState='已提交'
  			 return 'diary_submit'
  		}else if(this.diaryState==2){
  			 this.subState='已修改'
  			 this.isEditSec=false
  			 return 'diary_edit'
  		}
  	},
  	openEdit(){
  		 this.isEditTeach=true
  	},
  	closeEdit(val){
  		if(val=='sure'){
  			this.showContent=this.EditContent
  		}
  		 this.isEditTeach=false
  	},
  	openTimePop (position) {
      this.bottomPopup= true
    },
//  close2 (position) {
//    this[position + 'Popup'] = false
//  },
    closeTimePop(val){
    	this.address=val
//  	this.beforeVal=val
    	this.bottomPopup=false
    },
    closeTimeSure(){
    	this.beforeVal=this.address
    	this.bottomPopup=false
    },
		addressChange (value, index) {
      this.address = [value]
   },
  	//获取该班教学公共信息
		getPublicInfo(data){
  			let that=this
  			that.axios.get('/iyx/courseDate/getDayInfo/'+that.currentFullDate).then(function(response){
  				that.publicInfo.academic=response.data.courseAcademicYear
					that.publicInfo.semester=response.data.courseAcademicTerm
					that.publicInfo.teachWeek=response.data.courseWhichWeek
					that.getAllCourse()
  			})
  	},
  	 //获取每节课的配置参数
    getCourTimeInfo(val){
			let that=this
			that.axios.get('/iyx/schedule/SelectAll').then(function(response){
				for(var i in response.data){
					that.timeOption[(parseInt(i)+1)+'']=response.data[i]
				}
				if(val.length==3){
						that.DDSJ=that.timeOption[val.slice(0,1)].start
						that.LKSJ=that.timeOption[val.slice(2)].end
						that.JSSJ=parseInt(that.timeOption[val.slice(0,1)].length)+parseInt(that.timeOption[val.slice(2)].length)
				}else if(val.length==4){
						that.DDSJ=that.timeOption[val.slice(0,1)].start
						that.LKSJ=that.timeOption[val.slice(2)].end
						that.JSSJ=parseInt(that.timeOption[val.slice(0,1)].length)+parseInt(that.timeOption[val.slice(2)].length)
				}else if(val.length==5){
						that.DDSJ=that.timeOption[val.slice(0,2)].start
						that.LKSJ=that.timeOption[val.slice(3)].end
						that.JSSJ=parseInt(that.timeOption[val.slice(0,2)].length)+parseInt(that.timeOption[val.slice(3)].length)
				}
				that.address=[]
				that.beforeVal=[]
				that.addressSlots[0].values=[]
				for(var i=0;i<that.JSSJ+20+1;i++){
						that.addressSlots[0].values.push((i)+'分钟')
				}
				that.address = [that.JSSJ+'分钟']
				that.beforeVal=[that.JSSJ+'分钟']
				
				that.SKSC=that.JSSJ
				if(that.DDSJ.length==4){
						that.DDSJ=0+that.DDSJ
				}
				if(that.LKSJ.length==4){
						that.LKSJ=0+that.LKSJ
				}
			}).catch(function(error){
				
			})
		},
		loadCoureInfo(){
			//获取该班当天课程信息
			let that = this
	      	that.axios.get('iyx/course/'+that.currentFullDate+'/'+localStorage.classId+'/ClassDayCourse?token='+localStorage.token).then(function (response) {
	      		that.todayCourse=response.data
//	        	that.getPublicInfo(that.todayCourse)
	        	that.getAllCourse()
	      	}).catch(function (error) {
	        	console.log(error);
	      	});
		},
		//获取该班级整个学期所有课程信息
		getAllCourse(){
  		let that= this;
      that.axios.get('/iyx/diary/'+that.publicInfo.semester+'/'+that.publicInfo.academic+'/'+localStorage.classId+'/ClassInfo?token='+localStorage.token).then(function (response) {
        that.courseData = response.data
        for(var i in  that.courseData){
        	that.courseList.push(that.courseData[i].courseName)
        	that.teacherName.push(that.courseData[i].courseTeacherName)
        	that.classroomPosition.push(that.courseData[i].courseClassroomPosition)
        }
      }).catch(function (error) {
        console.log(error)
      })
  	},
  	isIndex(data,val){
  		
  		var tempIndex={}
  		for(var i in this.$route.query){
  			tempIndex[this.$route.query[i]]=this.$route.query[i]
  		}
			if(tempIndex[data]==undefined){
				this.addClassId[val]=''
				return true
			}else{
				return false
			}
  	},
  	handleChange(val){
    	if(val=='save'){
    		this.submitThis()
    	}else{
    		this.dialog=true
    	}
    },
  	submitThis(){
  		var arrTimeMinute=0
    	var leaTimeMinute=0
    	var arrT=this.arrTime+''
    	var leaT=this.leaTime+''
    	if(arrT.length==3){
    		arrTimeMinute=parseInt(arrT.slice(0,1))*60+parseInt(arrT.slice(1,3))
    	}else{
    		arrTimeMinute=parseInt(arrT.slice(0,2))*60+parseInt(arrT.slice(2,4))
    	}
    	if(leaT.length==3){
    		leaTimeMinute=parseInt(leaT.slice(0,1))*60+parseInt(leaT.slice(1,3))
    	}else{
    		leaTimeMinute=parseInt(leaT.slice(0,2))*60+parseInt(leaT.slice(2,4))
    	}
    	var timeD=leaTimeMinute-arrTimeMinute
  		if(this.DJJ.length!=0){
  				if(this.courseName.length!=0){
  						if(this.courTeaName.length!=0){
  								if(this.arrTime<=this.leaTime){
  										if(timeD<=(this.JSSJ+20)){
						    					this.open()
										    	this.isSubmitThis=true
										    	this.popTitleInfo='确定要提交吗？'
						    			}else{
						    					this.popCorrect=true
													this.popCorrectTitle='时间差不得大于最大授课时长'
						    			}
  								}else{
  										this.popCorrectTitle="离开时间不得早于到达时间！"
  										this.popCorrect=true
  								}
  						}else{
  								this.popCorrectTitle="教师名字不能为空！"
  								this.popCorrect=true
  						}
  				}else{
  						this.popCorrectTitle="课程名称不能为空！"
  						this.popCorrect=true
  				}
  		}else{
  				this.popCorrectTitle="请选择节次"
  				this.popCorrect=true
  		}
    	
    },
  	open () {
      this.popCommissary = true
    },
    close(val){
    	if(val=='sure'){
	    		if(this.isSubmitThis){
	    					this.getIsCoursId(this.DJJ)
//								this.save2('增课')
	    		}else{
	      	}
      }else if(val=='cancel'){
      }else if(val=='correct'){
      	this.popCorrect=false
      }
      this.popCommissary = false
    },
  	

    kcChange(a){
      this.kcIndex = a
    },
//  getjxrw(){
//    let that= this;
//    that.axios.get('/gleenSoft-base/jxkh/ttkpj/kc').then(function (response) {
//      that.list = response.data.result
//      for(var i in that.list){
//      	that.focusData.push(that.list[i].KCMC)
//      }
//    }).catch(function (error) {
//      console.log(error)
//      console.info('错了')
//    })
//  },
//  getkcjs(){
//    let that= this;
//    that.axios.get('/gleenSoft-base/jxkh/ttkpj/kcjs?KCMC=' + that.kcmc).then(function (response) {
//      that.jsList = response.data.result
//      for(var i in that.jsList){
//        console.info(that.jsList[i])
//        that.jiaoshiliebiao.push(that.jsList[i].JSXM)
//      }
//      
//    }).catch(function (error) {
//      console.log(error)
//    })
//  },
    handleToggle (key) {//为什么switch不用调这个方法，因为不需要实时提交数据，区别于点名
      if(!this.disable){
        this[key] = !this[key]
      }
    },
    //获取一天中的各种时间
    variousTime(){
    	var thisDate=new Date()
		  var currentYear=thisDate.getFullYear()
	  	var mon=this.correcTime(thisDate.getMonth()+1)       
	  	var toDate=this.correcTime(thisDate.getDate())
	  	var currentHour=this.correcTime(thisDate.getHours()) 
	  	var currentMinutes=this.correcTime(thisDate.getMinutes())
	  	
	  	this.year=thisDate.getFullYear()+''
	  	this.month=this.correcTime(thisDate.getMonth()+1)+''
	  	this.currDate=this.correcTime(thisDate.getDate())+''
			this.currentmonth=mon+'-'+toDate
	  	this.currentTime=currentHour+':'+currentMinutes
	  	this.currentFullDate=currentYear+'-'+this.currentmonth
    },
    correcTime(data){
    	if(data<10){
    		data='0'+data
    	}
    	return data
    },
    //查询课堂日志表里的课程信息
		getIsCoursId(val){
				let that=this
				that.axios.get('/iyx/diary/'+that.year+'/'+that.month+'/'+that.currDate+'/'+val+'/DiaryInfo').then(function(response){
					  console.info(response.data)
						if(response.data.length==0){
							that.getCoursId=null
							that.save2('增课',that.getCoursId)
						}else if(response.data.length!=0){
							that.getCoursId=response.data.courseId
							that.save2('增课',that.getCoursId)
						}else{
							that.$parent.showToast('提交失败!')
						}
				}).catch(function(error){
					
    		})
		},
    save2(val,Val2){
    	let that=this
    	that.variousTime()
    	that.axios.post('/iyx/diary/ClassDiary',{
    		"courseId":Val2,
    		"courseName": that.courseName,
			  "courseTeacherName": that.courTeaName,
			  "coursePosition":  that.classPosition,
			  "courseIndex": that.DJJ,
			  "diaryState": val,
			  "diaryPostTime": that.currentFullDate+'-'+that.currentTime,
//			  "diary_revise_time": null,
			  "arriveTime": that.currentFullDate+'-'+that.DDSJ,
			  "leaveTime": that.currentFullDate+'-'+that.LKSJ,
			  "teachLength":parseInt(that.address[0]),
			  "attendanceState":that.SFTG,
			  "homeworkState": that.ZYBZ,
			  "attcheckState":that.SFKQ,
			  "teachContent": that.showContent
    	}).then(function(response){
    			console.info(response.data)
    			if(response.data.length==32){
    				  setTimeout(function(){
    						that.$router.go(-1)
    					},1500)
    				  that.$parent.showToast('提交成功!')
    			}
    			if(response.data==1){
    			 that.diaryState=response.data
	    		}else if(response.data==2){
	    			 that.diaryState=response.data
	    			 that.isEditSec=false
	    		}else if(response.data=='已修改，无法再次修改'){
	    			 
	    		}
    	}).catch(function(error){
    			that.$parent.showToast('提交失败!')
    	})
    },
    save(SKLX){
      let that= this;
      that.axios.post('/gleenSoft-base/jxkh/xxwypj/add',{
        NRBM:that.$route.query.NRBM,
        SFTG:that.SFTG?1:0, //是否脱岗
        DDSJ:that.DDSJ, //到达时间
        LKSJ:that.LKSJ, //离开时间
        JSSJ:that.JSSJ, //讲授时间
        ZYBZ:that.ZYBZ?1:0, //作业布置
        SFKQ:that.SFKQ?1:0,  //是否考勤
        SJSKDD:that.SJSKDD,
        SJXKKH:that.SJXKKH,
        SJSKJS:that.SJSKJS,
        SJKCMC:that.SJKCMC,
        SJKCDM:that.SJKCDM,
        SJSKJSZGH:that.SJSKJSZGH,
        SKLX:SKLX,
        DJJ:that.DJJ
      }).then(function (response) {
      }).catch(function (error) {
        console.log(error)
      })
      this.toast = true
      if (this.toastTimer) clearTimeout(this.toastTimer)
      this.toastTimer = setTimeout(() => { this.toast = false }, 1000)
    },
     handlechange(val){
//  	this.kcIndex=this.focusData.indexOf(val)
//			this.getIndex=this.courseList.indexOf(val)
			this.courseName=val
			var n=this.courseList.indexOf(val)
			this.courTeaName=this.teacherName[n]
			this.classPosition=this.classroomPosition[n]
    }
    
    
  }
}
</script>
<style>
 
</style>
